if (typeof(UI) === "undefined") {
    var UI = {};
}

// Class: UI.City

// Constructor: constructor
//
// Parameters:
//     scorer - TTRScorer instance to register city with.
//     data - City data.
//     layer - KineticJS layer to draw track on.
UI.City = function (scorer, data, layer) {
    this.name = data.name;

    // Register the city with the scorer.
    this.city = new City(this.name);
    scorer.getBoard().addCity(this.city);

    this.layer = layer;

    // Create a circle at the city's location.
    this.circle = new Kinetic.Circle({
        "fill": "lightgrey",
        "stroke": "darkgrey",
        "radius": 7,
        "x": data.location.x,
        "y": data.location.y
    });
    this.layer.add(this.circle);

    // Display the city's name as text.
    var xOffset = (!data.hasOwnProperty("textOffset")) ? 0 :
        (!data.textOffset.hasOwnProperty("x")) ? 0 : data.textOffset.x;
    var yOffset = (!data.hasOwnProperty("textOffset")) ? 0 :
        (!data.textOffset.hasOwnProperty("y")) ? 0 : data.textOffset.y;
    this.text = new Kinetic.Text({
        "text": (data.breakText !== true) ? this.name : this.name.replace(/\s+/g, "\n"),
        "fill": "darkred",
        "x": data.location.x + xOffset,
        "y": data.location.y + yOffset
    });
    this.layer.add(this.text);

    UI.Batch.drawLayer(this.layer);
};

// Method: getName
// Retrieves the name of this city.
UI.City.prototype.getName = function () {
    return this.name;
};

// Method: getCity
// Retrieves the TTRScorer City object for this city.
UI.City.prototype.getCity = function () {
    return this.city;
};

// Method: highlight
// Highlights this city with a border and optional color.
//
// Parameters:
//     color - Color to highlight city with. Optional.
//             If undefined, the city will remain its normal color.
UI.City.prototype.highlight = function (color) {
    this.circle.setStroke("black");
    if (color !== undefined && color !== null && color !== "")
        this.circle.setFill(color);
    UI.Batch.drawLayer(this.layer);
};

// Method: lowlight
// Removes any highlighting on this city.
UI.City.prototype.lowlight = function () {
    this.circle.setStroke("darkgrey");
    this.circle.setFill("lightgrey");
    UI.Batch.drawLayer(this.layer);
};

// Method: hide
// Hides this city, removing it from the display.
UI.City.prototype.hide = function () {
    this.circle.setVisible(false);
    this.text.setVisible(false);
    UI.Batch.drawLayer(this.layer);
};

// Method: show
// Restores this city to the display.
UI.City.prototype.show = function () {
    this.circle.setVisible(true);
    this.text.setVisible(true);
    UI.Batch.drawLayer(this.layer);
};

// Method: reset
// Resets the display of this city.
UI.City.prototype.reset = function () {
    this.lowlight();
    this.show();
};